<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common/annulus.css"/>
    <style>
        html,body{
            background: white;
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .arrow01 {
            width: 0.14rem;
            height: 0.07rem;
            background-size: 0.14rem 0.07rem;
            background-image: url(../image/tools/arrow01.png);
        }
        .title-block {
            width: 3.43rem;
            height: 0.44rem;
            background-size: 3.43rem 0.44rem;
            background-image: url(../image/inquiry/title-background.png);
        }
        .block {
            background-size: 3.43rem 1.33rem;
            background-image: url(../image/inquiry/block-background.png);
            background-repeat: no-repeat;
            background-position: center bottom;
        }
        .yinyang {
            width: 3.75rem;
            height: 0.32rem;
            background-size: 3.75rem 0.32rem;
            background-image: url(../image/tools/yinyang.png);
        }
        .not-active {
            display: none;
        }
    </style>
</head>
<body>
    <div id="member-list-empty" class="flex not-active" style="width: 100%; height: 100%; justify-content: center; align-items: center;">
        <div style="width: 1.80rem">
            <p style="width: 100%; font-size: 0.16rem; color: #231313; text-align: center;">暂无信息</p>
            <p style="width: 100%; font-size: 0.14rem; color: #7C7272; text-align: center; margin-top: 0.10rem">点击添加成员获取信息</p>
            <div style="width: 100%; height: 0.45rem; font-size: 0.17rem; color: white; text-align: center; line-height: 0.45rem; margin-top: 0.28rem; border-radius: 0.225rem; background-color: #A0522C;" tapmode onclick="openAddMemberWin()">添加成员</div>
        </div>
    </div>
    <div id="today-fortune" class="not-active">
        <div style="width: 100%; height: 2.40rem; background-color: white;">
            <div style="width: 100%; height: 0.30rem"></div>
            <div class="flex" style="width: 100%; justify-content: center;">
                <div class="flex" style="align-items: center;" tapmode onclick="changeMember()">
                    <p id="member-name" style="font-size: 0.22rem; line-height: 0.30rem; color: #643432; font-weight: 600"></p>
                    <div class="arrow01"></div>
                </div>
            </div>
            <div class="flex" style="justify-content: space-between; align-items: center; width: 100%; margin-top: 0.32rem">
                <div id="echarts-left" style="width: 0.92rem; margin-left: 0.20rem">
                    <div class="loading">
                        <div class="left"></div>
                        <div class="right"></div>
                        <div class="progress">
                            <p id="composite-value" style="font-size: 0.22rem; color: #FE5578; font-weight: 600; margin-top: 0.16rem"></p>
                            <p style="font-size: 0.08rem; color: #28354C;">综合指数</p>
                        </div>
                    </div>
                </div>
                <div id="echarts-right" style="margin-right: 0.20rem">
                    <div class="flex" style="align-items: center; margin-bottom: 0.06rem">
                        <p style="font-size: 0.10rem; color: #626A7D; margin-right: 0.12rem">爱情:</p>
                        <div style="width: 1.30rem; height: 0.06rem; background-color: #F3F3F3; border-radius: 0.03rem">
                            <div id="love-line" style="width: 0rem; height: 0.06rem; background-color: #FE5757; border-radius: 0.03rem"></div>
                        </div>
                        <p id="love-value" style="font-size: 0.12rem; color: #28354C; margin-left: 0.12rem"></p>
                    </div>
                    <div class="flex" style="align-items: center; margin-bottom: 0.06rem">
                        <p style="font-size: 0.10rem; color: #626A7D; margin-right: 0.12rem">工作:</p>
                        <div style="width: 1.30rem; height: 0.06rem; background-color: #F3F3F3; border-radius: 0.03rem">
                            <div id="work-line" style="width: 0rem; height: 0.06rem; background-color: #59BCFB; border-radius: 0.03rem"></div>
                        </div>
                        <p id="work-value" style="font-size: 0.12rem; color: #28354C; margin-left: 0.12rem"></p>
                    </div>
                    <div class="flex" style="align-items: center; margin-bottom: 0.06rem">
                        <p style="font-size: 0.10rem; color: #626A7D; margin-right: 0.12rem">财运:</p>
                        <div style="width: 1.30rem; height: 0.06rem; background-color: #F3F3F3; border-radius: 0.03rem">
                            <div id="money-line" style="width: 0rem; height: 0.06rem; background-color: #FECA57; border-radius: 0.03rem"></div>
                        </div>
                        <p id="money-value" style="font-size: 0.12rem; color: #28354C; margin-left: 0.12rem"></p>
                    </div>
                    <div class="flex" style="align-items: center;">
                        <p style="font-size: 0.10rem; color: #626A7D; margin-right: 0.12rem">健康:</p>
                        <div style="width: 1.30rem; height: 0.06rem; background-color: #F3F3F3; border-radius: 0.03rem">
                            <div id="health-line" style="width: 0rem; height: 0.06rem; background-color: #1CD1A1; border-radius: 0.03rem"></div>
                        </div>
                        <p id="health-value" style="font-size: 0.12rem; color: #28354C; margin-left: 0.12rem"></p>
                    </div>
                </div>
            </div>
            <div class="flex" style="margin-top: 0.18rem">
                <p id="lucky-number" style="font-size: 0.12rem; color:#231313; margin-left: 0.20rem"></p>
                <p id="lucky-color" style="font-size: 0.12rem; color:#231313; margin-left: 0.30rem"></p>
                <p id="lucky-area" style="font-size: 0.12rem; color:#231313; margin-left: 0.30rem"></p>
            </div>
        </div>

        <div class="yinyang" style="margin-top: 0.05rem; margin-bottom: 0.25rem;"></div>

        <div class="flex" style="width: 100%; height: auto; justify-content: center;">
            <div style="width: 3.43rem; border-radius: 0.055rem; overflow: hidden; background-color: #FDFDFD;">
                <div class="title-block">
                    <p style="font-size: 0.20rem; line-height: 0.44rem; color:#643432; font-weight: 600; width: 100%; text-align: center;">今日提醒</p>
                </div>
                <div class="block" style="padding: 0.27rem 0.21rem 0.17rem 0.21rem;">
                    <p id="today-tips" style="color: #643332"></p>
                </div>
            </div>
        </div>

        <div class="flex" style="width: 100%; height: auto; justify-content: center; margin-top: 0.20rem;">
            <div style="width: 3.43rem; border-radius: 0.055rem; overflow: hidden; background-color: #FDFDFD;">
                <div class="title-block">
                    <p style="font-size: 0.20rem; line-height: 0.44rem; color:#643432; font-weight: 600; width: 100%; text-align: center;">简  介</p>
                </div>
                <div class="block" style="padding: 0.27rem 0.21rem 0.17rem 0.21rem;">
                    <p id="explanation" style="color: #643332"></p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common/common.js"></script>
<!--<script type="text/javascript" src="../script/common/echarts/echarts.min.js"></script>-->
<script type="text/javascript">
    var UIActionSelector, memberListEmptyEl, todayFortuneEl, memberName, compositeValue, loveLineEl, loveValueEl, workLineEl, workValueEl, moneyLineEl, moneyValueEl, healthLineEl, healthValueEl;
    var luckyNumber, luckyColor, luckyArea, todayTipsEl, explanationEl;
    var memberList = [], memberListAndroid = [], selectedMember = [];
    var css=function(t,s){
        s=document.createElement('style');
        s.innerText=t;
        document.body.appendChild(s);
    };
    apiready = function () {
        memberListEmptyEl = $api.byId("member-list-empty");
        todayFortuneEl = $api.byId("today-fortune");

        memberName = $api.byId("member-name");
        compositeValue = $api.byId("composite-value");
        loveLineEl = $api.byId("love-line");
        loveValueEl = $api.byId("love-value");
        workLineEl = $api.byId("work-line");
        workValueEl = $api.byId("work-value");
        moneyLineEl = $api.byId("money-line");
        moneyValueEl = $api.byId("money-value");
        healthLineEl = $api.byId("health-line");
        healthValueEl = $api.byId("health-value");

        luckyNumber = $api.byId("lucky-number");
        luckyColor = $api.byId("lucky-color");
        luckyArea = $api.byId("lucky-area");

        todayTipsEl = $api.byId("today-tips");
        explanationEl = $api.byId("explanation");

        getMemberList();

        api.setRefreshHeaderInfo({
            bgColor: 'rgba(255, 255, 255, 0)',
            textColor: '#000000',
            textDown: '下拉可以刷新',
            textUp: '松开立即刷新',
            textLoading: '正在刷新数据中',
            textTime: '最后更新'
        }, function(ret, err) {
            if (memberList.length == 0) {
                window.location.reload();
            } else {
                getTodayFortune(selectedMember["member_id"], selectedMember["name"]);
            }
            api.refreshHeaderLoadDone();
        });
    }

    function getMemberList() {
        api.ajax({
            url: apiUrl + '/tools/member-list',
            tag: '/tools/member-list',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    memberList = ret.data.member_list;
                    if (memberList.length == 0) {
                        $api.removeCls(memberListEmptyEl, "not-active");
                    } else {
                        // $api.removeCls(memberListEmptyEl, "not-active");
                        $api.removeCls(todayFortuneEl, "not-active");

                        for (var i=0,len=memberList.length; i<len; i++) {
                            memberList[i]["name"] = memberList[i]["family_name"] + memberList[i]["given_name"];
                            // if (api.systemType != "ios") {
                            //     memberListAndroid[i] = memberList[i]["family_name"] + memberList[i]["given_name"];
                            // }
                            memberListAndroid[i] = memberList[i]["family_name"] + memberList[i]["given_name"];
                        }

                        if (api.systemType == "ios") {
                            memberList.unshift({"name": "添加新成员"});
                        }

                        selectedMember["member_id"] = memberList[1]["member_id"];
                        selectedMember["name"] = memberList[1]["family_name"] + memberList[1]["given_name"];
                        getTodayFortune(memberList[1]["member_id"], memberList[1]["family_name"] + memberList[1]["given_name"]);
                    }
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function getTodayFortune(memberId, memberNameText) {
        $api.addCls(memberListEmptyEl, "not-active");
        $api.removeCls(todayFortuneEl, "not-active");

        api.openFrame({
            name: 'loadingPage',
            url: './loadingPage.html',
            slidBackEnabled: false,
            bgColor: "rgba(0,0,0,0)",
            pageParam: {
                msg: "test",
            },
            animation: {
                type: 'none',
                duration: 0
            }
        });
        api.ajax({
            url: apiUrl + '/tools/today-fortune',
            tag: '/tools/today-fortune',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                    member_id: memberId,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    selectedMember["member_id"] = memberId;
                    selectedMember["name"] = memberNameText;

                    $api.text(memberName, memberNameText);

                    css('.right:after {' +
                        'transform-origin: left center;' +
                        'transform: rotateZ('+ ret.data.composite/100*360 +'deg);' +
                        '}');
                    $api.text(compositeValue, ret.data.composite + "%");

                    $api.css(loveLineEl, "width: " + ret.data.love + "%;");
                    $api.css(workLineEl, "width: " + ret.data.work + "%;");
                    $api.css(moneyLineEl, "width: " + ret.data.money + "%;");
                    $api.css(healthLineEl, "width: " + ret.data.health + "%;");
                    $api.text(loveValueEl, ret.data.love);
                    $api.text(workValueEl, ret.data.work);
                    $api.text(moneyValueEl, ret.data.money);
                    $api.text(healthValueEl, ret.data.health);

                    $api.text(luckyNumber, "幸运数字：" + ret.data.lucky_number);
                    $api.text(luckyColor, "幸运颜色：" + ret.data.lucky_color);
                    $api.text(luckyArea, "开运方位：" + ret.data.lucky_area);

                    $api.text(todayTipsEl, ret.data.today_tips);
                    $api.text(explanationEl, ret.data.explanation);

                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
                api.closeFrame({
                    name: 'loadingPage'
                });
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function openAddMemberWin() {
        api.openWin({
            name: 'addMemberWin',
            url: './tool/addMemberWin.html',
            slidBackType: 'edge',
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }

    function changeMember() {
        // if (api.systemType == "ios") {
        //     UIActionSelector = api.require('UIActionSelector');
        //     UIActionSelector.open({
        //         datas: memberList,
        //         iPhoneXBottomHeight:0,
        //         layout: {
        //             row: 5,
        //             col: 1,
        //             height: 40,
        //             size: 16,
        //             sizeActive: 20,
        //             rowSpacing: 5,
        //             colSpacing: 10,
        //             maskBg: 'rgba(0,0,0,0.6)',
        //             bg: '#fff',
        //             color: '#666666',
        //             colorSelected: '#24253D'
        //         },
        //         animation: true,
        //         cancel: {
        //             text: '取消',
        //             size: 16,
        //             w: 90,
        //             h: 35,
        //             bg: '#fff',
        //             bgActive: '#ccc',
        //             color: '#30A2FF',
        //             colorActive: '#fff'
        //         },
        //         ok: {
        //             text: '确认',
        //             size: 16,
        //             w: 90,
        //             h: 35,
        //             bg: '#fff',
        //             bgActive: '#ccc',
        //             color: '#30A2FF',
        //             colorActive: '#fff'
        //         },
        //         title: {
        //             text: '请选择成员',
        //             size: 17,
        //             h: 44,
        //             bg: '#fff',
        //             color: '#848484'
        //         },
        //         lineColor: 'rgba(223,223,228,0.3)',
        //         selectedBold: false,
        //         fixedOn: "backGround",
        //     }, function(ret, err) {
        //         if (ret) {
        //             // alert(JSON.stringify(ret));
        //             // $api.text(memberName, ret.selectedInfo[0]["family_name"] + ret.selectedInfo[0]["given_name"]);
        //             if (ret.eventType == "ok") {
        //                 if (ret.level1 == "添加新成员") {
        //                     openAddMemberWin();
        //                 } else {
        //                     getTodayFortune(ret.selectedInfo[0]["member_id"], ret.selectedInfo[0]["family_name"] + ret.selectedInfo[0]["given_name"]);
        //                 }
        //             }
        //         } else {
        //             // alert(JSON.stringify(err));
        //         }
        //     });
        // } else {
        //     api.actionSheet({
        //         // title: '请选择成员',
        //         cancelTitle: '取消',
        //         destructiveTitle: '添加新成员',
        //         buttons: memberListAndroid
        //     }, function(ret, err) {
        //         var index = ret.buttonIndex;
        //         var len = memberList.length;
        //         if (index == 1) {
        //             openAddMemberWin();
        //         } else if (index > 1 && index < (len + 2)) {
        //             getTodayFortune(memberList[index - 2]["member_id"], memberList[index - 2]["family_name"] + memberList[index - 2]["given_name"]);
        //         }
        //     });
        // }

        api.actionSheet({
            // title: '请选择成员',
            cancelTitle: '取消',
            destructiveTitle: '添加新成员',
            buttons: memberListAndroid
        }, function(ret, err) {
            var index = ret.buttonIndex;
            var len = memberList.length;
            // alert(index)
            if (index == 1) {
                openAddMemberWin();
            } else if (index > 1 && index < (len + 2)) {
                getTodayFortune(memberList[index - 1]["member_id"], memberList[index - 1]["family_name"] + memberList[index - 1]["given_name"]);
            }
        });
    }
</script>
